<template>
  <div class="answers">
   <!-- 机器人 回答-->
    <div class="questions_answers_robot">
        <div class="robot_time" v-if="chatTime">{{ chatTime }}</div>
        <div class="robot_bubble">
            <div class="robot_bubble_left">
                <div class="robot_head_portrait">
                    <img src="@/assets/image/robot_avatar.png" alt="">
                </div>
                <div class="robot_name">{{ robotInfo.robotName }}</div>
            </div>
            <div class="robot_bubble_right">
                <div class="robot_bubble_info">
                    <template v-if="answersData">
                      <!-- 返回用户个人信息 -->
                      <template v-if="answersData.type === 'queryUsers'">
                        <AnswersQueryUsers :answersData="answersData"></AnswersQueryUsers>
                      </template>
                      <!-- 返回多个用户列表 -->
                      <template v-if="answersData.type === 'queryUsersList'">
                        <AnswersQueryUsersList :answersData="answersData"></AnswersQueryUsersList>
                      </template>
                      <!-- 返回用户组织信息 -->
                      <template v-if="answersData.type === 'queryDepts'">
                        <AnswersQueryDepts :answersData="answersData"></AnswersQueryDepts>
                      </template>
                      <!-- 返回用户组织集合 -->
                      <template v-if="answersData.type === 'queryDeptsList'">
                        <AnswersQueryDeptsList :answersData="answersData"></AnswersQueryDeptsList>
                      </template>
                      <!-- 返回多条记录 -->
                      <template v-if="answersData.type === 'list'">
                        <AnswersList :robotInfo="robotInfo" :answersData="answersData"/>
                      </template>
                      <!-- 返回唯一答案 -->
                      <template v-if="answersData.type === 'object'">
                        <AnswersObject :robotInfo="robotInfo" :answersData="answersData"/>
                      </template>
                      <!-- 返回闲聊或者无法匹配到问题答案 -->
                      <template v-if="answersData.type === 'text'">
                        <div class="bubble_text">{{ answersData.data }}</div>
                      </template>
                      <!-- 快捷导航气泡 -->
                      <template v-if="answersData.type === 'navList'">
                        <AnswersNavList :robotInfo="robotInfo" :answersData="answersData"/>
                      </template>
                      <!-- 业务 -->
                      <template v-if="answersData.type === 'business'">
                        <AnswersBusiness :answersData="answersData"/>
                      </template>
                      <!-- 我的足迹气泡 -->
                      <template v-if="answersData.type === 'footPrint'">
                        <AnswersFootPrint :answersData="answersData"/>
                      </template>
                      <!-- 初始化题库列表 -->
                      <template v-if="answersData.type === 'categoryList'">
                        <AnswersCategory :answersData="answersData"/>
                      </template>
                      <!-- 工单列表 -->
                      <template v-if="answersData.type === 'workOrderList'">
                        <AnswersWorkOrderList :answersData="answersData"/>
                      </template>
                      <!-- 智办搜索框查询的工单列表 -->
                      <template v-if="answersData.type === 'workOrderSearchList'">
                        <AnswersWorkOrderSearchList :answersData="answersData"/>
                      </template>
                      <!-- 智能巡检 -->
                      <template v-if="answersData.type === 'inTellingPatrolInspect'">
                        <AnswersInTellingPatrolInspect />
                      </template>
                      <!-- 三会一课 -->
                      <template v-if="answersData.type === 'sanKe'">
                        <AnswersThreeMeetLesson />
                      </template>
                      <!-- 第一议题”和党委中心组学习 -->
                      <template v-if="answersData.type === 'diYiYiTi'">
                        <AnswersFirstTopic />
                      </template>
                      <!-- 第一议题巡查完成气泡框内容 -->
                      <template v-if="answersData.type === 'diYiYiTiList'">
                        <AnswersFirstTopicList />
                      </template>
                      <!-- 第一议题巡查结果详细内容 -->
                      <template v-if="answersData.type === 'diYiYiTiObject'">
                        <AnswersFirstTopicObject />
                      </template>
                      <!-- 智说搜索查询内容显示 -->
                      <template v-if="answersData.type === 'ZSTitleList'">
                        <AnswersZsSearchList :answersData="answersData" />
                      </template>
                      <!-- 会议内容展示 -->
                      <template v-if="answersData.type === 'meeting'">
                        <div v-html="answersData.data"></div>
                      </template>
                      <!-- 智能巡检、用章申请权限判断提示信息 -->
                      <template v-if="answersData.type === 'roleErrMsg'">
                        <div>此系统目前开放给管理员，您暂时无权访问</div>
                      </template>
                    </template>
                    <template v-else>
                      <van-loading type="spinner" size="24px" color="#356ffb"></van-loading>
                    </template>
                </div>
            </div>
        </div>
        <template v-if="answersData">
          <AnswersSubscript v-if="answersData.type === 'object'" :answersData="answersData"/>
        </template>
    </div>
  </div>
</template>

<script>
import getTime from '@/utils/getTime.js'
import slidingScrollBar from '@/utils/slidingScrollBar.js'
import AnswersSubscript from '@/components/home/answersSubscript/Index'
import AnswersList from '@/components/home/answersBubbleType/AnswersList'
import AnswersObject from '@/components/home/answersBubbleType/AnswersObject'
import AnswersNavList from '@/components/home/answersBubbleType/AnswersNavList'
import AnswersBusiness from '@/components/home/answersBubbleType/AnswersBusiness'
import AnswersFootPrint from '@/components/home/answersBubbleType/AnswersFootPrint'
import AnswersCategory from '@/components/home/answersBubbleType/AnswersCategory'
import AnswersQueryUsers from '@/components/home/answersBubbleType/AnswersQueryUsers'
import AnswersWorkOrderList from '@/components/home/answersBubbleType/AnswersWorkOrderList'
import AnswersQueryDepts from '@/components/home/answersBubbleType/AnswersQueryDepts'
import AnswersQueryDeptsList from '@/components/home/answersBubbleType/AnswersQueryDeptsList'
import AnswersQueryUsersList from '@/components/home/answersBubbleType/AnswersQueryUsersList'
import {mapState} from 'vuex'
import AnswersInTellingPatrolInspect from "components/home/answersBubbleType/AnswersInTellingPatrolInspect";
import AnswersThreeMeetLesson from "components/home/answersBubbleType/AnswersThreeMeetLesson";
import AnswersFirstTopic from "components/home/answersBubbleType/AnswersFirstTopic";
import AnswersFirstTopicList from "components/home/answersBubbleType/AnswersFirstTopicList";
import AnswersFirstTopicObject from "components/home/answersBubbleType/AnswersFirstTopicObject";
import AnswersWorkOrderSearchList from "components/home/answersBubbleType/AnswersWorkOrderSearchList";
import AnswersZsSearchList from "components/home/answersBubbleType/AnswersZsSearchList";
import dayjs from "dayjs";
import {isEmpty} from "@/common/util";

export default {
  name: 'Answers',
  props: ['answersData'],
  data() {
    return {
      chatTime: null,
    }
  },
  created() {
    // 四个页面日期初始化
    if (this.$store.state.initChatTimeCount > 0) {
      this.$store.state.initChatTimeCount -= 1;
      this.$store.state.lastChatTime = null;
    }

    // 聊天内容日期
    if (isEmpty(this.$store.state.lastChatTime) || dayjs().diff(this.$store.state.lastChatTime, 'minutes') >= 5) {
      this.chatTime = dayjs().format('HH:mm');
      this.$store.state.lastChatTime = dayjs();
    }
  },
  components: {
    AnswersZsSearchList,
    AnswersWorkOrderSearchList,
    AnswersList,
    AnswersObject,
    AnswersNavList,
    AnswersBusiness,
    AnswersFootPrint,
    AnswersCategory,
    AnswersSubscript,
    AnswersQueryUsers,
    AnswersWorkOrderList,
    AnswersQueryDepts,
    AnswersQueryDeptsList,
    AnswersQueryUsersList,
    AnswersInTellingPatrolInspect,
    AnswersThreeMeetLesson,
    AnswersFirstTopic,
    AnswersFirstTopicList,
    AnswersFirstTopicObject
  },

  updated(){
    // 当机器人回答的数据渲染后，再次滑动屏幕到指定位置
    this.$nextTick(() => {
      // 获取当前板块中用户提问元素
      const questionsDomList = document.querySelectorAll('#CON_' + this.rhPlate + ' .questions');
      // 获取最后一个用户提问元素
      const questionsDom = Array.from(questionsDomList)[questionsDomList.length - 1];
      // 获取该元素距离顶部的距离
      const questionsDomOffsetTop = questionsDom ? questionsDom.offsetTop + 20 : 0;
      slidingScrollBar(questionsDomOffsetTop,'smooth');  //滑动到指定位置
    })
  },
  computed: {
    ...mapState(['robotInfo','rhPlate']),
    getTimes(){
      return getTime();
    }
  }
}
</script>
